<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="dao.BillDetailDAO" %>
<%@ page import="model.BillDetailModel" %>
<%@ page import="common.Constant" %>
<%@ page import="java.util.ArrayList"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=${encoding}">
        <%--get bill details list--%>
        <c:set var="billList" value='<%= BillDetailDAO.getBillByIEID(request.getParameter("ieBillID"))%>' scope="session"></c:set>
        <c:set var="status" value="<%= request.getParameter("status") %>"></c:set>
        <c:set var="integer" value="1"></c:set>

<script type="text/javascript" language="JavaScript">
    function changeNum(){
        var i = 1;
        var totalAmount = 0;
        var row = document.getElementById('txtNo').value;
        var discount = document.getElementById('discount').value;
        for(i; i <= row; i++){
            var ckNum = document.getElementById('txtNum'+i).value;
            if(ckNum != ''){
                if(isNaN(ckNum)){
                    document.getElementById('txtNum' + i).value = "1";
                    alert("Number must be a integers!");
                    return;
                }
                ckNum = ckNum.replace("-","");
                if((parseInt(ckNum) - 0) + "" != document.getElementById('txtNum' + i).value){
                    document.getElementById('txtNum' + i).value = "1";
                    alert("Number must be positive integers!");
                    return;
                }
                if(document.getElementById('txtNum' + i).value == ""){
                    document.getElementById('txtNum' + i).value = "1";
                }
                document.getElementById('txtAmount' + i).value = document.getElementById('txtNum' + i).value * document.getElementById('txtPrice' + i).value;
            }
            totalAmount+=parseInt(document.getElementById('txtAmount' + i).value);
        }
        document.getElementById('totalAmount1').value = totalAmount;
        document.getElementById('totalAmount').value = totalAmount - ((totalAmount*discount)/100);
    }

    function changeDiscount(){
        document.getElementById('discount').value = document.getElementById('txtDiscount').value;
    }

    function confirmReview(x)
    {
        var act = '';
        document.getElementById('review').value = 'review';
        if(x == 'A')
        {
                act = 'review';
                document.getElementById('action').value = act;
                document.getElementById('approve').value = 'approve';
        }
        else
        {
                var value = false;
                value = window.showModalDialog("inputReason.jsp","Arg1","dialogHeight: 200px; dialogWidth: 300px; dialogTop: 250px; dialogLeft: 350px; edge: Raised; center: Yes; help: No; scroll: No; status: Yes;");
                if(value != false && value != null)
                {
                    act = 'review';
                    document.getElementById('action').value = act;
                    document.getElementById('reason').value = value;
                    document.getElementById('reject').value = 'reject';
                }
                else
                        return;
        }
        if(confirm("Are you sure to " + act + " this bill?"))
            document.forms['checkReview'].submit();
    }
</script>
        <title>Bill details Page</title>
    </head>
    <body onload="changeNum();changeDiscount();">
        <div id="main_container">
		<!-- S HEAD CONTENT -->
            <jsp:include page="block/header.jsp" />
            <!-- E HEAD CONTENT -->

            <!-- S Top Menu -->
            <jsp:include page="block/top_menu.jsp" />
            <!-- E Top Menu -->

            <!-- S Navigation -->
            <jsp:include page="block/navigation.jsp" />
            <!-- E Navigation -->

            <!-- S Left Menu -->
            <jsp:include page="block/left_menu.jsp" />
            <!-- E Left Menu -->

		<!-- S Body Content -->
                <div class="center_content">
                <form action="BillDetailsController" method="post" id="BillDetails" name="BillDetails">
                    <c:if test="${not empty param.err}">
                            <b class="error"> Input into the mandatory fields (*) </b>
                    </c:if>
                    <table cellpadding="0" cellspacing="0" border="0" style="background: transparent" align="center">
                        <tr>
                            <th colspan="5" align="center"><h1>Bill Details</h1><br/></th>
                        </tr>
                    </table>
                    <table cellpadding="0" cellspacing="0" border="2" style="background: transparent" align="center">
                        <tr>
                            <th bgcolor= '#186fb2' width="30px" valign="middle"><div class = "div_txtintable1">No.</div></th>
                            <th bgcolor= '#186fb2' valign="middle"><div class = "div_txtintable1">Product Name</div></th>
                            <th bgcolor= '#186fb2' valign="middle"><div class = "div_txtintable1">Price</div></th>
                            <th bgcolor= '#186fb2' valign="middle"><div class = "div_txtintable1">Number</div></th>
                            <th bgcolor= '#186fb2' valign="middle"><div class = "div_txtintable1">Amount($)</div></th>
                        </tr>
                        <c:forEach var="obj" items="${billList}">
                            <tr <c:if test="${integer % 2 eq 0}"> style="background-color: silver" </c:if>>
                                <td align="center">${integer}</td>
                                <td>
                                    <input type="text" id="txtProductName${integer}" name="txtProductName${integer}" value="${obj.productName}" readonly style="background-color: transparent"/>
                                    <input type="hidden" id="txtProductID${integer}" name="txtProductID${integer}" value="${obj.productID}" />
                                    <input type="hidden" id="txtID${integer}" name="txtID${integer}" value="${obj.id}" />
                                    <input type="hidden" id="txtDiscount" name="txtDiscount" value="${obj.discount}" onchange="changeDiscount()" />
                                </td>
                                <td><input type="text" name="txtPrice${integer}" id="txtPrice${integer}" value="${obj.price}" readonly style="background-color: transparent"/></td>
                                <td><input type="text" name="txtNum${integer}" id="txtNum${integer}" value="${obj.number}" readonly style="background-color: transparent"/></td>
                                <td><input type="text" name="txtAmount${integer}" id="txtAmount${integer}" value="${obj.amount}" readonly style="background-color: transparent"/></td>
                            </tr>
                            <c:set var="integer" value="${integer+1}"></c:set>
                        </c:forEach>
                        <input type="hidden" id="txtStatus" name="txtStatus" value="${status}" />
                        <input type="hidden" id="txtNo" name="txtNo" value="${integer-1}"/>
                        <tr style="background-color: teal; font-style: oblique">
                            <td></td>
                            <td colspan="3" style="background-color: inherit">Amount</td>
                            <td><input type="text" id="totalAmount1" name="totalAmount1" value="" readonly style="background-color: transparent" /> </td>
                        </tr>
                        <tr style="background-color: teal; font-style: oblique">
                            <td></td>
                            <td colspan="3" style="background-color: inherit">Discount</td>
                            <td><input type="text" id="discount" name="discount"
                                       value=""
                                       readonly style="background-color: transparent" /> % </td>
                        </tr>
                        <tr style="background-color: teal; font-style: oblique">
                            <td></td>
                            <td colspan="3" style="background-color: inherit">Total Amount</td>
                            <td><input type="text" id="totalAmount" name="totalAmount" value="" readonly style="background-color: transparent"/> </td>
                        </tr>
                    </table>
                </form>
                <form action="IEBillController" method="post" id="checkReview" name="checkReview">
                    <c:if test="${sessionScope.role eq 'Trearer'}">
                    <table cellpadding="3" cellspacing="3" border="0" style="background: transparent" align="center">
                        <tr>
                            <th colspan="5"><br/>
                                <input type="hidden" id="ieBillID" name="ieBillID" value="<%= request.getParameter("ieBillID") %>" />
                                <input type="hidden" name="action" id="action" value="" />
                                <input type="hidden" name="reason" id="reason" value="" />
                                <input type="hidden" name="review" id="review" value="" />
                                <input type="hidden" name="approve" id="approve" value="" />
                                <input type="hidden" name="reject" id="reject" value="" />
                                <c:if test="${status eq 0 or status eq 2}">
                                    <a href="javascript: confirmReview('A')"> <img src="images/approve.png" alt="Approve"/> </a>
                                </c:if>
                                <c:if test="${status eq 0}">
                                 <a href="javascript: confirmReview('R')"> <img src="images/reject.png" alt="Reject"/> </a>
                                </c:if>
                                <br/>
                            </th>
                        </tr>
                    </table>
                    </c:if>
                </form>
                </div>
		<!-- E Body Content -->

                <!-- S Footer -->
			<jsp:include page="block/footer.jsp" />
		<!-- E Footer -->
	</div>
    </body>
</html>
